<style>

.el-breadcrumb__item .el-breadcrumb__inner{
    font-size:14px;
    color:#7485B1;
    padding:20px 0 18px 0;
    cursor: pointer;
}

.el-breadcrumb__item .el-icon-arrow-right {
    color:#7784A3;
    margin:0 5px;
}

.el-breadcrumb__item.curPage .el-breadcrumb__inner{
    font-size:14px;
    color:#3A3A63
}
.breadcrumb-box .viewCur {
    font-size:20px;
    color:#252452;
    margin:18px 0 13px 0;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color:#3A3A63;
}
</style>

<template>
    <section class="breadcrumb-box clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for=" (item, index) of path" :key="index" :to="{ path: item.path }">{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="viewCur">
            {{ curName }}
        </div>
    </section>
</template>
<script>
export default {
    props:['path'],
    data(){
      return {
        curName:''
      }
    },

    watch:{
        path() {
            this.curName = this.path[this.path.length-1].name

        }
    },

    mounted() {
        if(!!this.path) {
            this.curName = this.path[this.path.length-1].name
        }

    }

}
</script>
